<template>
  <el-dialog title="选择图标" :visible.sync="dialogVisible" width="30%">
    <div class="dialog-container">
      <svg-icon v-for="icon in icons" :key="'dialog-item-' + icon" class="dialog-item-icon" :icon-class="icon" @click="selectIcon(icon)" />
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'IconDialog',
  props: {
    value: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      icons: []
    }
  },
  mounted() {
    const idList = []
    document.querySelectorAll('body>svg symbol').forEach(item => idList.push(item.id.replace('icon-', '')))
    this.icons = idList.filter(item => !!item)
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    },
    selectIcon(icon) {
      this.dialogVisible = false
      this.$emit('input', icon)
    }
  }
}
</script>
